<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="fanhuiHome" @tap="toFanhuiHome"></view>
			<view class="pageTitle">岗位详情</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<!-- 内容区背景图 -->
			<view class="page_bg" :style="'top:' + touHeight + 'px'"><image :src="URL+'/JD_wx_img/pageTop_bg02.png'" mode="widthFix"></image></view>
			<view class="details_top">
				<view class="details_title">{{type}}</view>
				<view class="details_text">{{hotel_name}}</view>
			</view>
			<view class="details_content">
				<view class="gangwei_top">
					<view class="details_yi">
						<view class="baoming">
							<view class="renshu">
								<view class="name">报名人数</view>
								<view class="num"> <view class="red">{{now}}</view>/{{sum}}人</view>
							</view>
							<view class="jindu_box"><view class="tiao" :style="'width:'+speed+';'"></view></view>
						</view>
						<view class="jiage"><view class="yuan">¥</view><view class="nu">{{price}}</view>/小时</view>
					</view>
					<view class="xinxi_box">
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png') left center no-repeat">到岗时间</view>
							<view class="text red">{{arrival}}</view>
						</view>
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img02.png') left center no-repeat">到岗地点</view>
							<view class="text">{{location}}</view>
						</view>
						<view class="xinxi_list">
							<view class="name" style="background: url('https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img03.png') left center no-repeat">乘车路线</view>
							<view class="text">{{route}}</view>
						</view>
					</view>
				</view>
				<view class="zhaopin">
					<view class="details_name">招聘要求</view>
					<view class="zhaopin_text">{{condition}}</view>
				</view>
				<view class="jiudian_jieshao">
					<view class="details_name">酒店简介</view>
					<view class="jiudian_text">
						<jyf-parser :html="html"></jyf-parser>
					</view>
				</view>
				<view class="con_btn con_btn01" :class="{'block':order_status==0}" @tap="openPop">
					<view class="big">立即报名</view>
					<view class="small">剩余名额：<view class="bold">{{surplus}}</view></view>
				</view>
				<view class="con_btn con_btn02" :class="{'block':order_status==1}" @tap="quxiaobaoming">
					<view class="big">取消报名</view>
					<view class="small">您已报名，等待商家确认</view>
				</view>
				<view class="con_btn con_btn03" :class="{'block':order_status==2}">
					<view class="big">报名成功</view>
					<view class="small">请准时到岗并打卡哦</view>
				</view>
			</view>
		</view>
		<!-- 劳动协议弹窗 -->
		<view class="popup_bg" :class="{'active':xieyi==1}" @tap="closePop"></view>
		<view class="xieyi_popup" :class="{'active':xieyi==1}">
			<view class="xieyi_name">兼职劳动协议</view>
			<view class="xieyi_text">
				<jyf-parser :html="html2"></jyf-parser>
			</view>
			<view class="xieyi_bottom">
				<view class="jujue" @tap="closePop">拒绝</view>
				<view class="tongyi" @tap="toLijibaoming">同意</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
		    jyfParser
		},
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				fulldate: '',
				type: '',
				hotel_name: '',
				sum: '',
				now: '',
				speed: '',
				price: '',
				arrival: '',
				location: '',
				route: '',
				condition: '',
				introduce: '',
				order_status: '',
				surplus: '',
				html: '',
				html2: '',
				xieyi: 2,
				company_id: '',
				order_id:''
			}
		},
		
		onShow(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			//onshow取值方法
			// 获取当前小程序的页面栈
			var pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			var currentPage = pages[pages.length-1];
			//打印id
			that.id = currentPage.options.id
			that.renderData(that.id)
		},
		methods: {
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//返回首页
			toFanhuiHome:function(){
				uni.redirectTo({
				    url: '/pages/index/index'
				})
			},
			
			//展示劳动协议弹窗
			openPop(e){
				var that = this;
				that.xieyi = 1;
			},
			
			//关闭劳动协议弹窗
			closePop(e){
				var that = this;
				that.xieyi = 2;
			},
			
			//报名效果
			toLijibaoming(e){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/Job/enroll?id='+that.id,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						if(res.data.code==1){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
								success: () => {
									that.renderData(that.id)
								}
							})
							that.xieyi = 2;
							return;
						}
						if(res.data.code==2){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
								success (res) {
									if (res.confirm) {
										uni.navigateTo({
										    url: '/pages/real_name/real_name',
										});
									}
								}
							})
							return;
						}
						if(res.data.code==0){
							that.xieyi = 2;
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
							})
							return;
						}
					}
				})
			},
			
			//取消报名
			quxiaobaoming(e){
				var that = this;
				uni.request({
					url: app.globalData.URL + '/api/v1/Job/cancel?id='+ that.order_id,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						console.log(res)
						if(res.data.code==1){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
								success: () => {
									that.renderData(that.id)
								}
							})
							return;
						}
						if(res.data.code==0){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426',
							})
							return;
						}
					}
				})
			},
			
			//内容渲染
			renderData:function(id){
				let that = this
				uni.request({
					url: app.globalData.URL + '/api/v1/Job/details?id='+id,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.type = res.data.data.type//岗位名称
						that.hotel_name = res.data.data.hotel_name//酒店名称
						that.sum = res.data.data.sum//酒店招聘总人数
						that.now = res.data.data.now +''//酒店当前招聘人数
						that.speed = res.data.data.speed//招聘进度
						that.price = res.data.data.price//薪资
						that.arrival = res.data.data.arrival//到岗时间
						that.location = res.data.data.location//招聘到岗地址
						that.route = res.data.data.route//乘车路线
						that.condition = res.data.data.condition//招聘要求
						that.order_status = res.data.data.order_status//报名状态
						that.surplus = res.data.data.surplus//剩余人数
						that.html = res.data.data.introduce//酒店简介
						that.company_id = res.data.data.company_id//酒店id
						that.order_id = res.data.data.order_id//酒店id
						//劳动协议内容渲染
						uni.request({
							url: app.globalData.URL + '/api/v1/Content/companyContract?id='+that.company_id,
							method: "get",
							success: function (res) {
								that.html2 = res.data.data//兼职劳动协议
							}
						})
					}
				})
			}
		}
	}
</script>

<style style="less">
	.page_content{
		padding: 0px;
		padding-bottom: 140rpx;
	}
	.details_top{
		position: relative;
		padding: 0px 30rpx;
		margin-top: 20rpx;
	}
	.details_top .details_title{
		font-size: 56rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.details_top .details_text{
		font-size: 28rpx;
		color: rgba(255,255,255,0.8);
		padding-left: 40rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img02.png) left center no-repeat;
		background-size: 32rpx 32rpx;
		margin-top: 10rpx;
	}
	.details_content{
		position: relative;
		margin-top: 16rpx;
	}
	.jiudian_jieshao{
		background: #fff;
		padding: 30rpx 0px;
		margin-top: 30rpx;
	}
	.jiudian_text{
		padding: 32rpx;
		color: #333333;
		font-size: 28rpx;
		line-height: 160%;
		padding-bottom: 0px;
	}
	.jiudian_text image{
		display: block;
		width: 100%;
	}
	.con_btn{
		display: none;
	}
	.con_btn.block{
		display: block;
	}
	.xieyi_popup{
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: -100%;
		-webkit-transition: all 0.5s ease-out;
		background: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		z-index: 30;
	}
	.xieyi_popup.active{
		bottom: 0px;
	}
	.xieyi_popup .xieyi_name{
		height: 100rpx;
		line-height: 110rpx;
		text-align: center;
		font-weight: 900;
		font-size: 34rpx;
		color: #333333;
	}
	.xieyi_popup .xieyi_text{
		font-size: 28rpx;
		line-height: 160%;
		color: #333333;
		padding: 0px 30rpx;
		max-height: 500rpx;
		overflow-x: hidden;
		margin-bottom: 30rpx;
	}
	.xieyi_popup .xieyi_bottom{
		overflow: hidden;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 34rpx;
		border-top: 2rpx solid #E5E5E5;
	}
	.xieyi_popup .xieyi_bottom .jujue{
		float: left;
		width: 50%;
		box-sizing: border-box;
		border-right: 2rpx solid #E5E5E5;
		color: #888888;
	}
	.xieyi_popup .xieyi_bottom .tongyi{
		float: left;
		width: 50%;
		color: #E85426;
	}
</style>
